<template>
  <section class="search">

    <div class="search-row">

      <span>
        <el-date-picker
          v-model="date"
          @change = '(val)=>date = val'
          format='yyyy-MM'
          type='month'
          placeholder="查询月份">
        </el-date-picker>  
      </span>
 
      <span style='margin-left:30px'>
        <el-button type='primary' @click.stop='handleSearch'>搜索</el-button>
      </span>  

    </div>

  </section>

</template>



<script>
import Vue from 'vue'
import Bus from './bus'
import { Message, DatePicker } from 'element-ui'
Vue.use(DatePicker)
export default {
	data () {
		return {
			date: new Date(),
			page: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		}
	},
	watch: {
		date (newValue) {
			Bus.$emit('date', `${newValue}`)
		}
	},
	mounted () {
		setTimeout(() => {
			this.transFormDate()
		}, 100)
	},
	methods: {
		transFormDate () {
			if (typeof this.date === 'object') {
				const month = new Date().getMonth() + 1 > 10 ? new Date().getMonth() : '0' + (new Date().getMonth() + 1)
				this.date = `${new Date().getFullYear()}-${month}`
			}
		},
		handleSearch () {
			if (this.checkDate()) {
				Bus.$emit('date', this.date)
				const params = {
					totaldate: this.date,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
				}
				this.Axios.Post('/reportLaborcostExecl/queryLaborcostList', params)
					.then((res) => {
						const { datas } = res.data
						this.page.total = res.data.total
						Bus.$emit('tableDatas', datas)
						Bus.$emit('pageSize', this.page.total)
					})
			}
		},
		checkDate () {
			if (!this.date) {
				Message.warning('请选择日期')
				return false
			}
			return true
		},
	}
}


</script>

<style scoped>
.search {
  padding: 30px 30px 0 20px;
}
</style>